<template>
  <div class="container">
    <!-- 导航栏 -->
    <header class="header">
      <div class="back" @click="goBack">
        &lt; <!-- 使用 < 符号 -->
        <span>{{ course.name }}</span>
      </div>
      <div class="add-student">添加学员</div>
    </header>

    <!-- 课程信息 -->
    <div class="class-info">
      <div class="time">{{ course.startTime }}-{{ course.endTime }}</div>
      <div class="date">{{ course.date }} ({{ weekday }})</div>
      <div class="room">上课教室：{{ course.site }}</div>
      <div class="content">上课内容：{{ course.introduce }}</div>
      <div class="remark">备注：{{ course.remark }}</div>
    </div>

    <!-- 搜索框 -->
    <div class="search-box">
		<up-input
	    placeholder="请输入学员姓名"
	    prefixIcon="search"
	    prefixIconStyle="font-size: 22px;color: #909399"
		border="bottom"
		clearable
		></up-input>
    </div>

    <!-- 考勤状态 -->
    <div class="attendance-status">
      <div class="status-title">考勤状态</div>
      <div class="status-filter">全部 ></div>
    </div>

    <div class="summary">
      签到<span class="num-green">{{ dataCount.chechIn }}</span>
	  ，请假<span class="num-red">{{ dataCount.leave }}</span>
	  ，未到<span class="num-orange">{{ dataCount.absent }}</span>
    </div>

    <!-- 学员列表 -->
    <div class="student-list">
      <div v-for="(student, index) in students" :key="index" class="student-card">
        <div class="avatar-container">
          <div class="default-avatar"></div>
        </div>
        <div class="name">{{ student.childName }}</div>
        <div class="stats">
          <div class="stat-item">
            <div class="label">剩余</div>
            <div class="value">{{ student.giveHour + student.buyHour }}课时</div>
          </div>
          <div class="stat-item">
            <div class="label">扣课</div>
            <div class="value" v-show="student.state === 1"><span style="color: red;">{{ course.dieHour }}</span>课时</div>
			<div class="value" v-show="student.state !== 1">0课时</div>
          </div>
        </div>
        <div class="buttons">
          <button 
            :class="['btn', 'btn-sign', { active: student.state === 1 }]" 
            @click="setStudentStatus(index, 1)"
          >签到</button>
          <button 
            :class="['btn', 'btn-absent', { active: student.state === 0 }]" 
            @click="setStudentStatus(index, 0)"
          >请假</button>
          <button 
            :class="['btn', 'btn-late', { active: student.state === 2 }]" 
            @click="setStudentStatus(index, 2)"
          >未到</button>
        </div>
      </div>
    </div>

    <!-- 底部操作 -->
    <div class="footer">
      <div class="select-all">
		  <checkbox-group @change="toggleAllSigned" >
			  <checkbox
			    :checked="isAllSigned"/>
		  </checkbox-group>
        <label>全选签到</label>
      </div>
	  <div>
		<button class="submit-btn" @click="handleSubmitCall">提交点名</button>
	  </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch,onMounted } from 'vue'
import { getCallStudent,getCallCourse,submitCall } from '@/api/schedule.js'
import { promise } from 'uview-plus/libs/function/test'
import { showLoading } from '@/utils/showLoading.js'
// 学员数据
const students = ref([])
const course = ref({})
const weekday = ref('')
const dataCount = ref({
	chechIn: 0,
	leave: 0,
	absent: 0
})
const courseId = ref('')


onMounted(() => {
	showLoading()
	courseId.value = uni.getStorageSync("courseId")
	uni.removeStorageSync("courseId")
	console.log("接收的课程id：",courseId.value)
	Promise.all([getCallStudent(courseId.value),getCallCourse(courseId.value)])
	.then(([resStudent,resCourse]) => {
		students.value = resStudent.data
		course.value = resCourse.data
		weekday.value = getWeek(course.value.date)
		uni.hideLoading()
	})
})


function getWeek(dateString) {
    const [year, month, day] = dateString.split('-');
    const date = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
    const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    return days[date.getDay()];
}

// 全选签到状态
const isAllSigned = ref(false)

// 全选逻辑：点击全选时，所有学员状态设为“签到”
const toggleAllSigned = () => {
	isAllSigned.value = !isAllSigned.value
  if (isAllSigned.value) {
    students.value.forEach(student => {
      student.state = 1
    })
  }
}

// 状态切换函数
const setStudentStatus = (index, status) => {
  students.value[index].state = status
  // 如果某个学员取消了签到，取消全选状态
  if (status !== 1) {
    isAllSigned.value = false
  }
}

// 监听 students 变化，判断是否全部签到，自动勾选全选框
watch(students, () => {
  const allSigned = students.value.every(s => s.state === 1)
  isAllSigned.value = allSigned
  let chechInCount = 0
  let leaveCount = 0
  let absentCount = 0
  students.value.forEach(student => {
	  if(student.state === 0){
		  leaveCount += 1
	  }else if(student.state === 1){
		  chechInCount += 1
	  }else{
		  absentCount += 1
	  }
  })
  dataCount.value.chechIn = chechInCount
  dataCount.value.leave = leaveCount
  dataCount.value.absent = absentCount
}, { deep: true })

// 返回
const goBack = () => {
  uni.navigateBack()
}
//提交签到信息
function handleSubmitCall(){
	const data = {
		course: course.value,
		children: students.value
	}
	submitCall(data).then(res => {
		uni.redirectTo({
			url: '/pages/index/index'
		})
		uni.showToast({
			title: '点名成功',
			icon: 'success'
		})
	})
}

</script>

<style scoped>
.container {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #f8f9fa;
  color: #333;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 16px 12px;
  border-bottom: 1px solid #eaeaea;
  background: white;
}

.back {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  cursor: pointer;
}

.add-student {
  font-size: 16px;
  color: #333;
  cursor: pointer;
}

.class-info {
  padding: 16px;
  background: white;
  margin-bottom: 16px;
}

.time {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 8px;
}

.date {
  font-size: 18px;
  margin-bottom: 8px;
}

.teacher, .assistant, .room, .content, .remark {
  font-size: 15px;
  color: #666;
  margin: 8px 0;
}

.search-box {
  padding: 5px;
  background: white;
  margin-bottom: 16px;
  position: relative;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
}

.search-box input {
  width: 100%;
  padding: 12px 12px 12px 40px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
  outline: none;
}

.attendance-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: white;
  border-bottom: 1px solid #eee;
}

.status-title {
  font-size: 16px;
  font-weight: 500;
}

.status-filter {
  font-size: 15px;
  color: #666;
  cursor: pointer;
}

.summary {
  padding: 16px;
  font-size: 15px;
  color: #666;
  line-height: 1.5;
}

.num-green {
  color: #28a745;
  font-weight: 500;
}

.num-red {
  color: #dc3545;
  font-weight: 500;
}

.num-orange {
  color: #ffc107;
  font-weight: 500;
}

.student-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 16px;
  background: white;
}

.student-card {
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 16px;
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.avatar-container {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0 auto 12px;
}

.default-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #e9ecef;
}

.edit-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  color: #4984c4;
  cursor: pointer;
}

.name {
  text-align: center;
  font-size: 16px;
  margin-bottom: 12px;
}

.stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 14px;
  color: #666;
}

.stat-item {
  text-align: center;
}

.value {
  font-weight: 500;
  color: #333;
}

.buttons {
  display: flex;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.btn {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 20px;
  font-size: 14px;
  background: white;
  cursor: pointer;
  transition: all 0.2s;
}

.btn:hover {
  background: #f5f5f5;
}

/* 签到按钮高亮 */
.btn-sign.active {
  background: #e3f2fd;
  border-color: #2196f3;
  color: #2196f3;
}

/* 请假按钮高亮 */
.btn-absent.active {
  background: #ffebee;
  border-color: #f44336;
  color: #f44336;
}

/* 未到按钮高亮 */
.btn-late.active {
  background: #fff3e0;
  border-color: #ff9800;
  color: #ff9800;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: white;
  border-top: 1px solid #eee;
}

.select-all {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: #666;
}

.submit-btn {
  padding: 14px 32px;
  background: #ff6b6b;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}

.submit-btn:hover {
  background: #e55a5a;
}
</style>